<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	</head>
	<body>
		<p>1.计算属性：</p>
		<div id="example">
			<p>origin text : {{ message }}</p>
			<p>reverse text : {{ reverseMessage }}</p>
		</div>

		<div id="demo">
			{{ fullname }}
		</div>

		<p>2.watch的用法</p>
		<div id="watch-example">
			<p>
				Ask a yes/no question, end with mark '?':
				<input v-model="question" />
			</p>
			<p> {{ answer }} </p>
			<img :src="imgSrc" />
		</div>

		<p>3.class与style绑定</p>
		<div id="class-demo" class="statics" :class="classObject"></div>

		<p>4.条件渲染</p>
		<div id="if-demo">
			<template v-if="loginType === 'username'">
				<label>Username</label>
				<input placeholder="Enter your username">
			</template>
			<template v-else>
				<label>Email</label>
				<input placeholder="Enter your email address">
			</template>
			<br />
			<button v-on:click="changeType">click</button>
		</div>

		<p>5.列表渲染</p>
		<ul id="for-demo">
			<li v-for="(item,index) in items">
				{{ parentMessage }} -- {{ index }} -- {{ item.message }}
			</li>
		</ul>

		<ul id="v-for-object">
			<div v-for="(value, key, index) in object" v-bind:key="index">
				{{ index }}. {{ key }}: {{ value }}
			</div>
		</ul>
		
		<p>6.表单输入</p>
		<div id="form-demo">
			<input v-model.lazy="message" placeholder="Edit it..."/>
			<p>message is: {{ message }}</p>
		</div>
		
		<p>7.复选框</p>
		<div id="checkbox-demo">
			<input type="checkbox" id="checkbox" v-model="checked"/>
			<label for="checkbox">{{ checked }}</label>
		</div>
		<p></p>
		<div id="checkbox-demo2">
			<input type="checkbox" id="jack" value="jack" v-model="checkednames"/>
			<label for="jack">jack</label>
			<input type="checkbox" id="bob" value="bob" v-model="checkednames"/>
			<label for="bob">bob</label>
			<input type="checkbox" id="tom" value="tom" v-model="checkednames"/>
			<label for="tom">tom</label>
			<br>
			<span>Checked names: {{ checkednames }}</span>
		</div>
		<script src="../js/index.js">
		</script>
	</body>
</html>
